<template>
  <div class="login">
    <div class="loginBox">
      <div class="left">
        <img
          src="http://47.93.101.203/admin/view_admin/img/sw.95275c21.jpg"
          alt=""
        />
      </div>
      <div class="right">
        <img
          src="http://47.93.101.203/admin/view_admin/img/logo.eb6eba32.png"
          alt=""
        />
        <el-form
          :model="ruleForm"
          status-icon
          :rules="rules"
          ref="ruleForm"
          class="demo-ruleForm"
        >
          <el-form-item prop="account">
            <el-input
              prefix-icon="el-icon-user"
              type="text"
              v-model="ruleForm.account"
              autocomplete="off"
            ></el-input>
          </el-form-item>
          <el-form-item prop="pwd">
            <el-input
              type="password"
              prefix-icon="el-icon-lock"
              v-model="ruleForm.pwd"
              autocomplete="off"
            ></el-input>
          </el-form-item>
          <el-form-item prop="imgcode">
            <el-input
              prefix-icon="el-icon-s-grid"
              v-model="ruleForm.imgcode"
              autocomplete="off"
            >
              <img
                slot="append"
                class="yzmimg"
                :src="imgUrl"
                @click="updata"
                alt=""
              />
            </el-input>
          </el-form-item>
          <el-form-item>
            <el-button
              type="primary"
              :disabled="isDisabled"
              @click="submitForm('ruleForm')"
              >提交</el-button
            >
          </el-form-item>
        </el-form>
      </div>
    </div>
  </div>
</template>
<script>
import { login } from "@/Api/user";
import { Message } from "element-ui";
export default {
  data() {
    var validateAccount = (rule, value, callback) => {
      if (value === "") {
        this.isAccount = false;
        callback(new Error("请输入用户名"));
      } else {
        if (/^\w{4,10}$/.test(value)) {
          callback();
          this.isAccount = true;
        } else {
          callback(new Error("用户名格式错误"));
          this.isAccount = false;
        }
      }
    };
    var validatePass = (rule, value, callback) => {
      if (value === "") {
        this.isPwd = false;
        callback(new Error("请输入密码"));
      } else {
        if (/^(?=.*[a-z]+)(?=.*[0-9]+).{5,10}$/.test(value)) {
          callback();
          this.isPwd = true;
        } else {
          this.isPwd = false;
          callback(new Error("密码格式错误"));
        }
      }
    };
    var validateCode = (rule, value, callback) => {
      if (value === "") {
        this.isCode = false;

        callback(new Error("请输入验证码"));
      } else {
        this.isCode = true;
        callback();
      }
    };

    return {
      isAccount: false,
      isPwd: false,
      isCode: false,
      isDisabled: true,
      imgUrl: "http://47.93.101.203/adminapi/captcha_pro",
      ruleForm: {
        pwd: "",
        account: "",
        imgcode: "",
      },
      rules: {
        pwd: [{ validator: validatePass, trigger: "change" }],
        account: [{ validator: validateAccount, trigger: "change" }],
        imgcode: [{ validator: validateCode, trigger: "change" }],
      },
    };
  },
  updated() {
    this.disabledFn();
  },
  methods: {
    updata() {
      this.imgUrl = `http://47.93.101.203/adminapi/captcha_pro?${Date.now()}`;
    },
    disabledFn() {
      if (this.isAccount && this.isPwd && this.isCode) {
        this.isDisabled = false;
      } else {
        this.isDisabled = true;
      }
    },
    submitForm(formName) {
      this.$refs[formName].validate((valid) => {
        if (valid) {
          login(this.ruleForm)
            .then((res) => {
              if (res.status === 200) {
                Message({
                  type: "success",
                  message: "登录成功",
                  duration: 1000,
                  onClose: () => {
                    console.log(11);
                  },
                });
              } else {
                Message({
                  type: "error",
                  message: res.msg,
                  duration: 1000,
                  onClose: () => {
                    this.updata();
                  },
                });
              }
              console.log(res);
            })
            .catch((err) => {
              console.log(err);
            });
        } else {
          console.log("error submit!!");
          return false;
        }
      });
    },
    resetForm(formName) {
      this.$refs[formName].resetFields();
    },
  },
};
</script>
<style lang="less">
.login {
  width: 100vw;
  height: 100vh;
  display: flex;
  justify-content: center;
  align-items: center;
  background: url("http://47.93.101.203/admin/view_admin/img/bg.7e15c493.jpg");
  background-size: 100% 100%;
  .loginBox {
    width: 80%;
    height: 400px;
    display: flex;
    .left {
      width: 55%;
      height: 100%;
      img {
        width: 100%;
        height: 100%;
      }
    }
    .right {
      flex: 1;
      background-color: white;
      padding: 30px;
      img {
        width: 100%;
        height: 80px;
      }
      button {
        width: 100%;
      }
      .el-input-group__append {
        width: 130px;
        height: 40px;
        padding: 0;
      }
      .yzmimg {
        width: 130px;
        height: 36px;
      }
    }
  }
}
</style>